<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../styles/prod.scss";
.el-date-editor.el-input, .el-date-editor.el-input__inner{
    width:100%;
}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
<template>
<el-tabs style='margin:20px;'>
    <el-form ref="form" :model="form" label-width="80px">
     <custom-card title="基本信息" class="mt-30">
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="编号:">
                        <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <el-form-item label="申请人:">
                        <el-input  placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-form-item label="申请部门:">
                        <el-input  placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span="24">
                 <div class="grid-content bg-purple-dark">
                    <el-form-item label="标题：">
                        <el-input placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
             </el-col>
          </el-row>
          <el-row>
             <el-col :span="24">
                 <div class="grid-content bg-purple-dark">
                    <el-form-item label="客户名称:">
                        <el-input  placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
             </el-col>
          </el-row>
          <el-row>
          <el-col :span="24">
                 <div class="grid-content bg-purple-dark">
                    <el-form-item label="机型码:">
                        <el-input  placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
             </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="出货批次:">
                        <el-input placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <el-form-item label="出货时间:">
                        <el-date-picker
                        v-model="value1"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-form-item label="出货数量:">
                        <el-input  placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-form-item label="包装师:">
                        <el-input  placeholder="请输入内容"></el-input>
                  </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light">
                    <el-form-item label="美工:">
                        <el-input  placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-form-item label="出货情况:">
                        <el-input placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
            </el-col>
          </el-row>
            <el-row>
             <el-col :span="8">
                 <div class="grid-content bg-purple-dark">
                    <el-form-item label="文稿来源:">
                        <el-input placeholder="请输入内容"></el-input>
                    </el-form-item>
                </div>
             </el-col>
          </el-row>
        </el-col>
      </el-row>
      
          <el-row>
             <el-col :span="24">
                 <div class="grid-content bg-purple-dark">
                    <el-form-item label="备注:">
                       <el-input type="textarea"></el-input>
                    </el-form-item>
                </div>
             </el-col>
          </el-row>
     </custom-card>
        <custom-card title="卡片名称" class="mt-30">
            <!-- 按钮 -->
            <el-row type="flex" class="row-bg">
               <el-col :span="24">
                    <div class="grid-content bg-purple">
                        <el-button type="primary">添加材料</el-button>
                        <el-button type="success">确认发稿</el-button>
                        <el-button type="danger">废弃</el-button>
                    </div>
                </el-col>  
            </el-row>   
            <!-- 表格下拉 -->
            <el-table
                :data="tableData5"
                border
                style="width: 100% ;margin-top:15px;">
                <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品名称">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                        <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <el-form-item label="商品 ID">
                        <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="店铺 ID">
                        <span>{{ props.row.shopId }}</span>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <span>{{ props.row.category }}</span>
                    </el-form-item>
                    <el-form-item label="店铺地址">
                        <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="商品描述">
                        <span>{{ props.row.desc }}</span>
                    </el-form-item>
                    </el-form>
                </template>
                </el-table-column>
                <el-table-column
                type="selection"
                label="商品 ID"
                prop="id">
                </el-table-column>
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        {{scope.$index + pageData.start}}
                    </template>
                    </el-table-column>
                <el-table-column
                label="料号"
                prop="id">
                </el-table-column>
                <el-table-column
                label="品名"
                prop="id">
                </el-table-column>
                <el-table-column
                label="材料"
                prop="id">
                </el-table-column>
                <el-table-column
                label="制作内容"
                prop="id">
                </el-table-column>
                <el-table-column
                label="文稿"
                prop="name">
                </el-table-column>
                <el-table-column
                label="状态"
                prop="desc">
                </el-table-column>
            </el-table>
        </custom-card>
         <custom-card title="" class="mt-30">
            <el-row>
               <el-col :span="6" style='float:right'>
                    <div class="grid-content bg-purple">
                        <el-button>取消</el-button>
                        <el-button type="primary">保存草稿</el-button>
                        <el-button type="danger">提交</el-button>
                    </div>
                </el-col>
            </el-row>
         </custom-card>   
</el-form>

   
  
</el-tabs>
</template>



<script>
import {
  mapGetters
} from 'vuex';
import CustomCard from'@/components/CustomCard/index';
export default {
  name: 'user',
  components: {
       CustomCard
    // 'depart-selector': () =>
    //   import ('./components/departSelector')
  },
  data() {
    return {
        form: {
          name: '',
          type: [],
        },
        // 分页
         pageData: {
            page: 1,
            total: 1,
            size: 10,
            start: 1
        },
        // 列表数据
         tableData5: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '+++++++++++++++++',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '------------',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }],
    value1:''
    }
  },
  created() {

  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    showMenu() {
      console.log('showMenu');
    },
    handleChange(val) {
       console.log(val);
    },
  }
}
</script>
